<template>
	<view class="view_box">
		<div class="logo_box">
			<img class="logo_img" src="https://fes.qyerstatic.com/fe_ssr_passport/41bd0a522fbeb024a41208a408ca73ec.png"
				alt="">
			<span class="title" v-show="isLogin">登录</span>
			<span class="title" v-show="!isLogin">注册</span>
		</div>
		<div class="out_box">
			<div class="login_box" v-show="isLogin">
				<!-- tab栏组件 -->
				<TabMenu :tabArr="tabArr" @change-tab="changeType"></TabMenu>

				<div class="login_info_box">
					<div class="login_tip">
						关于穷游网将实行<span style="color: #28b76c;">手机绑定实名制的说明</span>
					</div>
					<div class="input_box account_box">
						<input @blur="checkData('account')" v-model="loginData.account.value" type="text" class="input"
							placeholder="手机号">
						<div class="err_tip" v-if="!loginData.account.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{ loginData.account.tipInfo }}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box password_box" v-show="loginType == 0">
						<input @blur="checkData('password')" type="password" class="input" placeholder="密码"
							v-model="loginData.password.value">
						<div class="err_tip" v-if="!loginData.password.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{ loginData.password.tipInfo }}</span>
							<span class="info">忘记密码</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box meg_code_box" v-show="loginType == 1">
						<input @blur="checkData('msgCode')" type="text" class="input" placeholder="验证码"
							v-model="loginData.msgCode.value">
						<button class="get_msg_code" @click="getMsgCode(1)">获取验证码</button>
						<div class="err_tip" v-if="!loginData.msgCode.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{ loginData.msgCode.tipInfo }}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<button class="login_but" @click="toLogin()">登录</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>没有穷游帐号？</span>
						<span style="color: #28b76c;" @click="isLogin = false">立即注册</span>
						<span class="info">境外手机号登录</span>
					</div>
				</div>
			</div>
			<div class="register_box" v-show="!isLogin">
				<div class="login_info_box">
					<div class="input_box account_box">
						<input type="text" @blur="checkData('phoneNum')" class="input" placeholder="手机号"
							v-model="registerData.phoneNum.value">
						<div class="err_tip" v-if="!registerData.phoneNum.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{ registerData.phoneNum.tipInfo }}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box password_box">
						<input type="password" @blur="checkData('password')" class="input" placeholder="密码"
							v-model="registerData.password.value">
						<div class="err_tip" v-if="!registerData.password.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{ registerData.password.tipInfo }}</span>
							<span class="info">忘记密码</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box meg_code_box">
						<input type="text" ref="r_msgCode" @blur="checkData('msgCode')" class="input" placeholder="验证码"
							v-model="registerData.msgCode.value">
						<button class="get_msg_code" @click="getMsgCode(2)">获取验证码</button>
						<div class="err_tip" v-if="!registerData.msgCode.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{ registerData.msgCode.tipInfo }}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<button class="login_but" @click="toRegister()">注册</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>已有穷游帐号？</span>
						<span style="color: #28b76c;" @click="isLogin = true">登录</span>
						<span class="info">同意<span style="color: #28b76c;">会员条款</span>和<span
								style="color: #28b76c;">免责声明</span>
						</span>
					</div>
				</div>
			</div>
			<div class="bg_box" v-show="isLogin"></div>
		</div>
	</view>
</template>

<script>
	import TabMenu from "../components/TabMenu.vue";
	import constants from "@/common/constants";
	import loginAPI from "@/api/loginAPI";
	import cacheUtil from "@/util/cacheUtil";
	import router from "@/router"

	export default {
		components: {
			TabMenu
		},
		data() {
			return {
				tabArr: ["账号登录", "短信快捷登录"],
				isLogin: true,
				loginType: 0, // 0: 账号登录 1: 短信快捷登录

				validate: constants.VALIDATE_CONFIG,
				loginData: {
					account: {
						value: 13123456789,
						checkSuccess: true,
						tipInfo: '',
						loginType: [0, 1]
					},
					password: {
						value: '',
						checkSuccess: true,
						tipInfo: '',
						loginType: [0]
					},
					msgCode: {
						value: '',
						checkSuccess: true,
						tipInfo: '',
						loginType: [1]
					}
				},
				registerData: {
					phoneNum: {
						value: 13123456789,
						checkSuccess: true,
						tipInfo: ''
					},
					password: {
						value: '',
						checkSuccess: true,
						tipInfo: ''
					},
					msgCode: {
						value: '',
						checkSuccess: true,
						tipInfo: ''
					}
				}
			};
		},
		mounted() {
			//
		},
		methods: {
			/**
			 * 切换登录类型
			 * @param {number} index - 登录类型的索引值
			 * 该方法用于根据提供的索引值切换登录类型，并更新登录类型的状态。
			 */
			changeType(index) {
				this.loginType = index
			},
			// 单个输入框验证
			checkData(key) {
				// const key = e.target.getAttribute("data-type");
				const {
					regExp,
					tipInfo
				} = this.validate[key];
				if (this.isLogin) {
					if (regExp.test(this.loginData[key].value)) {
						this.loginData[key].checkSuccess = true;
						return true
					} else {
						this.loginData[key].tipInfo = tipInfo;
						this.loginData[key].checkSuccess = false;
					}
				} else {
					if (regExp.test(this.registerData[key].value)) {
						this.registerData[key].checkSuccess = true;
						return true
					} else {
						this.registerData[key].tipInfo = tipInfo;
						this.registerData[key].checkSuccess = false;
					}
				}
				return false
			},
			// 验证多个输入框
			checkAllData() {
				if (this.isLogin) {
					for (let key in this.loginData) {
						if (this.loginData[key].loginType.includes(this.loginType) && !this.checkData(key)) {
							return false
						}
					}
				} else {
					for (let key in this.registerData) {
						if (!this.checkData(key)) {
							return false
						}
					}
				}
				return true
			},
			// 登录
			toLogin() {
				if (this.checkAllData()) {
					if (this.loginType == 0) {
						loginAPI.accountLogin({
							account: this.loginData.account.value,
							password: this.loginData.password.value
						}).then(resp => {
							if (resp.code == 1) {
								this.LoginSuccess(resp)
							}else if(resp.code == 0){
								this.$eventBus.emit('onError',resp.msg)
							}
						}).catch(err => {
							console.log(err);
						})
					} else {
						loginAPI.phoneNumLogin({
							phoneNum: this.loginData.account.value,
							password: this.loginData.password.value
						}).then(resp => {
							if (resp.code == 1) {
								this.LoginSuccess(resp)
							}else if(resp.code == 0){
								this.$eventBus.emit('onError',resp.msg)
							}
						}).catch(err => {
							console.log(err);
						})
					}
				}
			},
			// 登录成功
			LoginSuccess(resp){
				cacheUtil.setLocalStorage('userInfo', resp.data)
				router.replace('/')
			},
			// 注册
			toRegister() {
				if (this.checkAllData()) {
					loginAPI.regsiter({
						"msgCode": this.registerData.msgCode.value,
						"password": this.registerData.password.value,
						"phoneNum": this.registerData.phoneNum.value
					}).then(resp => {
						if (resp.code == 1) {
							this.isLogin = true
							this.loginData.account.value = this.registerData.phoneNum.value

							// 设置token
							cacheUtil.setLocalStorage('userInfo', resp.data)
						}
					}).catch(err => {
						console.log(err);
					})
				}
			},
			// 获取验证码
			getMsgCode(type) {
				const checkRes = type == 1 ? this.checkData('account') : this.checkData('phoneNum')
				if (checkRes) {
					loginAPI.getMsgCode({
						phoneNumber: type == 1 ? this.loginData.account.value : this.registerData.phoneNum.value,
						type
					}).then(resp => {
						if (resp.code == 1) {
							type == 1 ? this.loginData.msgCode.value = resp.data : this.registerData.msgCode
								.value = resp.data
						}
					}).catch(err => {
						console.log(err);
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	@import url("../../public/public.scss");

	.view_box {
		height: 100%;
		background-image: url(https://fes.qyerstatic.com/fe_ssr_passport/ecb39528d488b6c520f7ddd3898379d6.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo_box {
		.logo_img {
			width: 126.5px;
			height: 46px;
		}

		.title {
			font-size: 24px;
			color: #fff;
			text-shadow: 0 0 4px rgba(0, 0, 0, .3);
			line-height: 46px;
			vertical-align: bottom;
		}
	}

	.out_box {
		display: flex;
		align-items: center;

		.login_box,
		.register_box {
			width: 380px;
			box-sizing: border-box;
			padding: 24px 24px;
			background-color: #FFFFFF;

			.login_info_box {
				width: 100%;

				.login_tip {
					width: 100%;
					font-size: 14px;
					line-height: 60px;
					height: 50px;
					color: #959595;
				}

				.input_box {
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 100%;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}

					.err_tip {
						min-width: 30px;
						height: 30px;
						line-height: 30px;
						color: #ff654c;
						font-size: 12px;
						display: flex;
						align-items: center;
						// visibility: hidden;

						.err_icon {
							flex-shrink: 0;
							width: 12px;
							height: 12px;
							margin-bottom: -2px;
							margin-right: 4px;
						}

						.err_info {
							flex-shrink: 0;
						}

						.info {
							width: 100%;
							text-align: end;
							color: #959595;
							cursor: pointer;
						}
					}
				}

				.meg_code_box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 200px;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}

					.get_msg_code {
						display: inline-block;
						box-sizing: border-box;
						border: 0;
						padding: 0 15px;
						width: 125px;
						height: 40px;
						line-height: 36px;
						border-radius: 3px;
						font-size: 14px;
						color: #fff;
						cursor: pointer;
						vertical-align: top;
						background-color: #3f9f5f;
					}
				}

				.login_but {
					display: inline-block;
					box-sizing: border-box;
					border: 0;
					padding: 0 15px;
					width: 100%;
					height: 36px;
					line-height: 36px;
					border-radius: 3px;
					font-size: 16px;
					color: #fff;
					cursor: pointer;
					vertical-align: top;
					background-color: #3f9f5f;
				}

				.login_auth_box {
					width: 100%;
					box-sizing: border-box;
					padding: 40px 12px 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.auth_icon {
						width: 40px;
						height: 40px;
					}
				}

				.bottom_tip {
					width: 100%;
					padding: 10px 0;
					height: 20px;
					line-height: 20px;
					color: #959595;
					font-size: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.info {
						width: 100%;
						text-align: end;
						flex-shrink: 1;
					}
				}

				.bottom_tip span {
					flex-shrink: 0;
				}
			}
		}

		.bg_box {
			width: 275px;
			height: 100%;
			background-repeat: no-repeat;
			background-image: url(https://fes.qyerstatic.com/FoLbAXJtwbB5SVORRmihPFWD-oYM);
			background-color: #f5f5f5;
			background-position: 50%;
			background-size: auto 100%;
		}
	}
</style>